<template>
    <div class="blog-list-container">
      <div class="search-filter">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索文章标题、内容或标签..."
        />
        <select v-model="sortOption">
          <option value="latest">按时间排序</option>
          <option value="likes">按点赞数排序</option>
        </select>
      </div>
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <!-- <h3>{{ blog.title }}</h3> -->
        <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
        <p>{{ blog.content }}</p>
        <p>{{ blog.pic }}</p>
        <router-link :to="`/blog/${blog.id}`">查看详情</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import life1 from "../images/life-1.png"
import life2 from "../images/life-2.png"
import life3 from "../images/life-3.jpg"
import life4 from "../images/life-4.jpg"
const searchQuery = ref('') 
const sortOption = ref('latest')
  const blogs = ref([
    { id: 1,  content: '75^ ^我说 冬天是吃漂亮冰淇淋的最好季节^^​',image:life1 },
    { id: 2, content: '一个很幸福的周末​',image:life2 },
    { id: 3, content: '原来追星会不远万里一个人来不熟悉的城市 ​​' ,image:life3},
    { id: 4, content: '老婆好美' ,image:life4},
    
])
  </script>
  
  <style scoped>
  .search-filter {
    margin-bottom: 20px;
  }
  
  .search-filter input {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-filter select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .blog-list-container {
    padding: 20px;
  }
  
  .blog-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style> 